<template>
  <div class="payment-page">
    <!-- 订单信息 -->
    <el-card class="order-info">
      <p>订单提交成功，请尽快付款！订单号：<span class="order-id">{{ orderId }}</span></p>
      <p>请您在1小时内完成支付，否则订单会被自动取消。</p>
      <p class="total-amount">实付： <span class="amount">¥{{ totalAmount }}</span></p>
    </el-card>

    <!-- 选择支付方式 -->
    <el-card class="payment-methods">
      <div class="title">选择支付方式</div>
      <div class="methods">
        <el-radio v-model="selectedMethod" label="alipay">支付宝</el-radio>
        <el-radio v-model="selectedMethod" label="wechat">微信支付</el-radio>
        <el-radio v-model="selectedMethod" label="unionpay">储蓄卡</el-radio>
        <el-radio v-model="selectedMethod" label="credit">信用卡</el-radio>
      </div>
    </el-card>

    <!-- 立即付款按钮 -->
    <el-button type="danger" @click="payNow" class="pay-button">立即付款</el-button>

    <!-- 剩余付款时间 -->
    <p class="remaining-time">剩余付款时间： <span class="time">{{ remainingTime }}</span></p>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

// 订单信息
const orderId = ref('13363636051'); // 示例订单号，实际应从路由参数或状态管理中获取
const totalAmount = ref(220.00); // 示例金额，实际应从状态管理中获取

// 支付方式
const selectedMethod = ref('alipay'); // 默认选中支付宝

// 剩余付款时间（示例为3600秒，即1小时）
const countdownDuration = ref(3600);
let intervalId = null;

const remainingTime = computed(() => {
  const minutes = Math.floor(countdownDuration.value / 60);
  const seconds = countdownDuration.value % 60;
  return `${minutes} 分 ${seconds} 秒`;
});

const startCountdown = () => {
  intervalId = setInterval(() => {
    if (countdownDuration.value > 0) {
      countdownDuration.value--;
    } else {
      clearInterval(intervalId);
    }
  }, 1000);
};

onMounted(() => {
  startCountdown();
});

const payNow = () => {
  // 根据选择的支付方式跳转到相应的支付页面
  if (selectedMethod.value === 'alipay') {
    router.push({ path: '/third-party-payment', query: { amount: totalAmount.value } });
  } else {
    console.log('Other payment methods not implemented yet.');
  }
};
</script>

<style scoped>
.payment-page {
  padding: 20px;
}

.order-info, .payment-methods {
  margin-bottom: 20px;
}

.order-id, .amount {
  color: red;
}

.methods {
  display: flex;
  gap: 20px;
}

.pay-button {
  width: 100%;
}

.remaining-time {
  text-align: right;
  margin-top: 10px;
}

.time {
  color: red;
}
</style>